<template>
  <BasicModal
    v-bind="$attrs"
    wrapClassName="hide-modal-header is-absolute"
    :maskStyle="{ position: 'absolute' }"
    @register="tenantRegister"
    :width="424"
    :minHeight="100"
    :zIndex="1005"
    centered
    :getContainer="getDelContainer"
    @ok="confirmSubmit"
    @cancel="resetModal"
  >
    <div class="del-tenant" v-if="tenantData.type === 'resetPwd'">
      <div class="tenant-header">
        <exclamation-circle-filled :style="{ fontSize: '22px', color: '#D7802E' }" />
        <div class="header-title">重置超管密码确认</div>
      </div>
      <div class="tenant-info">是否重置超管密码，重置后密码不可恢复！</div>
    </div>
    <div class="del-tenant" v-else>
      <div class="tenant-header">
        <exclamation-circle-filled :style="{ fontSize: '22px', color: '#D7802E' }" />
        <div class="header-title">删除企业提示</div>
      </div>
      <div class="tenant-info" v-if="tenantData.checkedDelList.length < 21">
        是否移除<span v-for="(item, index) in tenantData.checkedDelList" :key="item.tenantId">
          {{ item.orgName }}{{ tenantData.checkedDelList.length - 1 !== index ? '、' : '' }}</span
        >{{ tenantData.checkedDelList.length === 1 ? '' : '等企业' }}，删除后数据不可恢复！
      </div>
      <div class="tenant-info" v-else>
        是否移除选中的{{ tenantData.checkedDelList.length }}个企业，删除后数据不可恢复！
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { message } from 'ant-design-vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import api from '@/api'

const { enterpriseDel, resetAdminPwd } = api

const emit = defineEmits(['operateSuccess', 'register'])

const tenantData = reactive<any>({
  type: '',
  tenantId: '',
  checkedDelKeys: [],
  checkedDelList: []
})

const [tenantRegister, { setModalProps, changeOkLoading, closeModal }] = useModalInner((data) => {
  tenantData.type = data.type || ''
  tenantData.tenantId = data.tenantId
  tenantData.checkedDelKeys = data.checkedDelKeys
  tenantData.checkedDelList = data.checkedDelList
})

const getDelContainer = () => {
  return document.querySelector('.page-wrapper')
}
const resetModal = () => {
  changeOkLoading(false)
}
// 确认提交
const confirmSubmit = async () => {
  try {
    changeOkLoading(true)
    if (tenantData.type === 'resetPwd') {
      await resetAdminPwd({
        orgTenantId: tenantData.tenantId
      })
      message.success('重置密码成功')
    } else {
      await enterpriseDel({
        tenantIdList: tenantData.checkedDelKeys
      })
      message.success('企业删除成功')
      emit('operateSuccess')
    }
    closeModal()
    resetModal()
  } catch (error) {
    changeOkLoading(false)
  }
}
</script>
<style lang="less" scoped>
.del-tenant {
  padding: 20px 10px;
  .tenant-header {
    display: flex;
    align-items: center;
    .header-title {
      line-height: 22px;
      font-weight: 600;
      font-size: 16px;
      margin-left: 16px;
    }
  }
  .tenant-info {
    margin-left: 36px;
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>
